<template>
  <div class="pages" >
    <div class="bindonAccount_die" >
      <div v-for="(item,index) in imgLength" :key="index">
        <div>
          <img :src="item.imgSrc" alt />
          <span>{{item.name}}</span>
        </div>
        <div @click="showDom(index)">{{item.consts}}</div>
      </div>
    </div>
    <div class="bindonAccount_meng" :style="windowHeight" v-show="bindonAccount_meng==1">
      <div class="bindonAccount_true" v-show="trueShow==1">
        <div @click="truejiechu(0)">确认解除</div>
        <div @click="truejiechu(1)">退出</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgLength: [
        {
          imgSrc: "http://www.zhaoshengku.net/wx-%E6%89%8B%E6%9C%BA.png",
          name: "",
          consts: "解除绑定"
        },
        {
          imgSrc: "http://www.zhaoshengku.net/wx-wx%28my%29.png",
          name: "",
          consts: "解除绑定"
        },
        {
          imgSrc:
            "http://www.zhaoshengku.net/wx-%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1.png",
          name: "",
          consts: "解除绑定"
        }
      ],
      windowHeight: "",
      trueShow: 0,
      bindonAccount_meng: 0,
      headerCode: "",
      indexjie: -1,
      myxinxi: {}
    };
  },
  methods: {
    myziliao() {
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/getinfo",
        header: {
          Authorization: this.headerCode
        },
        method: "post",
        success: res => {
          if (res.data.code == 200) {
            this.$store.state.myxinxi = res.data.data;
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    showDom(e) {
      this.indexjie = e;
      if (e == 0) {
        wx.showToast({
          title: "手机号不支持解除绑定！",
          icon: "none",
          duration: 1500
        });
        return;
      } else if (e == 1) {
        if (this.imgLength[1].name == "暂时还未绑定微信") {
          wx.showToast({
            title: "请绑定微信！",
            icon: "none",
            duration: 1500
          });
          return;
        } else {
          this.indexjie = e;
          this.trueShow = 1;
          this.bindonAccount_meng = 1;
        }
      } else if (e == 2) {
        if (this.imgLength[2].name == "暂时还未绑定QQ") {
          wx.showToast({
            title: "请绑定QQ！",
            icon: "none",
            duration: 1500
          });
          return;
        } else {
          this.indexjie = e;
          this.trueShow = 1;
          this.bindonAccount_meng = 1;
        }
      } else {
        this.indexjie = e;
        this.trueShow = 1;
        this.bindonAccount_meng = 1;
      }
    },
    truejiechu(e) {
      if (e == 1) {
        this.trueShow = 0;
        this.bindonAccount_meng = 0;
      } else {
        if (this.indexjie == 1) {
          var data = {
            info_wechat: ""
          };
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/setinfo",
            method: "post",
            data: data,
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              if (res.data.code == 200) {
                this.imgLength[1].name = "暂时还未绑定微信";
                this.trueShow = 0;
                this.bindonAccount_meng = 0;
                this.myziliao();
                wx.showToast({
                  title: "解绑成功",
                  icon: "true",
                  duration: 1000,
                  mask: true
                });
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        } else {
          var data = {
            info_qq: ""
          };
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/setinfo",
            method: "post",
            data: data,
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              console.log(res);
              if (res.data.code == 200) {
                this.imgLength[2].name = "暂时还未绑定QQ";
                this.trueShow = 0;
                this.bindonAccount_meng = 0;
                this.myziliao();
                wx.showToast({
                  title: "解绑成功",
                  icon: "true",
                  duration: 1000,
                  mask: true
                });
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      }
    },
    onShows() {
      var _this = this;
      _this.bindonAccount_meng=0;
      wx.getStorage({
        key: "koken",
        success: res => {
          if (res.data) {
            this.headerCode = "Bearer " + res.data;
          } else {
            wx.navigateTo({
              url: "/pages/loginRegister/main"
            });
          }
        }
      });
      wx.getSystemInfo({
        success: res => {
          this.windowHeight = "height:" + res.windowHeight * 2 + "rpx;";
        }
      });
      // 设置头
      wx.setNavigationBarTitle({
        title: "账号绑定"
      });
      // 获取自己的信息
      // 获取token
      _this.myxinxi = _this.$store.state.myxinxi;
      console.log(this.$store.state.myxinxi);
      if (_this.myxinxi.info_phone) {
        this.imgLength[0].name = _this.myxinxi.info_phone;
        this.imgLength[0].consts="解除绑定"
      } else {
        this.imgLength[0].name = "暂时还未绑定手机号";
        this.imgLength[0].consts=" "
      }
      if (_this.myxinxi.info_wechat) {
        this.imgLength[1].name = _this.myxinxi.info_wechat;
        this.imgLength[1].consts="解除绑定"
      } else {
        this.imgLength[1].name = "暂时还未绑定微信";
        this.imgLength[1].consts=" "
      }
      if (_this.myxinxi.info_qq) {
        this.imgLength[2].name = _this.myxinxi.info_qq;
        this.imgLength[2].consts="解除绑定"
      } else {
        this.imgLength[2].name = "暂时还未绑定QQ";
        this.imgLength[2  ].consts=" "
      }
      wx.stopPullDownRefresh();
    }
  },
  onShow() {
    this.onShows();
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
div{
  box-sizing: border-box;
}
.pages {
  transition: all 1s;
  overflow: hidden;
}
.bindonAccount_die {
   padding: 0 20rpx;
}
.bindonAccount_die > div {
  width: 100%;
  height: 137rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 12rpx 0px rgba(102, 102, 102, 0.36);
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 43rpx;
  box-sizing: border-box;
  margin: 20rpx 0;
}
.bindonAccount_die > div > div:nth-child(1) {
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 36rpx;
  display: flex;
  align-items: center;
}
.bindonAccount_die > div > div:nth-child(1) > img {
  width: 88rpx;
  height: 88rpx;
  margin-right: 44rpx;
}
.bindonAccount_die > div > div:nth-child(2) {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  height: 100rpx;
  line-height: 100rpx;
  width: 150rpx;
  text-align: center;
}
.bindonAccount_meng {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
}
.bindonAccount_true {
  width: 100%;
  position: absolute;
  bottom: 200rpx;
}
.bindonAccount_true > div {
  width: 685rpx;
  height: 98rpx;
  background: #fff;
  text-align: center;
  margin: 0 auto;
  margin-top: 10rpx;
  font-size: 34rpx;
  font-weight: bold;
  border-radius: 50rpx;
  line-height: 98rpx;
}
.bindonAccount_true > div:nth-child(1) {
  color: #ff0000;
}
.bindonAccount_true > div:nth-child(2) {
  color: #333333;
}
</style>
